<template>
  <div style="width: 65%; margin: 20px auto;">
    <div style="display: flex; justify-content: space-between;flex-wrap: wrap; gap: 20px;">
      <!-- 第一个子元素 -->
      <div class="card" style="margin-right: 10px;margin-top: 10px" @click="loadCirclePosts('全部')" :class="{'circle-active': circle === '全部'}">
        <img style="width: 50px; height: 50px; margin-right: 5px; display: block" src="@/assets/imgs/slt/sl_2.png" title="全部">
        <div style="line-height: 50px">全部</div>
      </div>
      <div class="card" style="margin-right: 10px;margin-top: 10px" v-for="item in circles" :key="item.id" @click="loadCirclePosts(item.name)" :class="{'circle-active': circle === item.name}">
        <img style="width: 50px; height: 50px; margin-right: 5px; display: block" :src="item.img" :title="item.name">
        <div style="line-height: 50px">{{ item.name }}</div>
      </div>
    </div>

    <div style="display: flex; justify-content: center; width: 100%;">
      <!-- 第二个子元素 -->
      <div v-if="posts.length > 0" style="margin-top: 30px; width: 100%;">
        <div @click="$router.push(`/front/postsDetail?id=${item.id}`)" v-for="item in posts" :key="item.id" style="display: flex; cursor: pointer;margin-top: 15px" class="card">
          <div style="flex: 1">
            <div style="font-size: 20px; margin-bottom: 10px">{{ item.title }}</div>
            <div style="color: #2656b5; margin-bottom: 10px">{{ item.descr }}</div>
            <div style="color: #28ab4d; margin-bottom: 10px">
              <span><i class="el-icon-user"></i>{{ item.userName }}</span>
              <span style="margin-left: 20px"><i class="el-icon-time"></i>{{ item.time }}</span>
              <span style="margin-left: 20px"><i class="el-icon-reading"></i>{{ item.readCount }}</span>
            </div>
          </div>
          <div>
            <img :src="item.img" alt="" style="width: 80px; height: 80px; display: block" />
          </div>
        </div>
        <div style="margin: 15px 0" v-if="total>pageSize">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div v-else style="margin-top: 10%; width: 100%;">
        <el-empty description="暂无帖子内容"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontPosts",
  data(){
    return{
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      circles:[],
      posts:[],
      circle:null,
      content:"",
      formVisible1: false,
    }
  },
  created() {
    this.load(1);
  },
  methods: {
    loadCircle() {
      this.$request.get('/circles/selectAll').then(res => {
        if (res.code === '200') {
          this.circles = res.data || [];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loadPosts(pageNum) {
      this.$request.get('/posts/selectFrontPage', {
        params: {
          pageNum: pageNum,
          pageSize: this.pageSize,
          circle: this.circle === '全部'? null : this.circle,
        }
      }).then(res => {
        if (res.code === '200') {
          this.posts = res.data?.list
          this.total = res.data?.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadCirclePosts(circle) {
      this.circle = circle;
      this.load(1);
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    load(pageNum) {
      this.loadCircle();
      this.loadPosts(pageNum);
    }
  }
}
</script>

<style scoped>
.card {
  /* 边框样式 */
  border: 1px solid #e0e0e0;
  padding: 10px 10px 10px 10px;
  /* 圆角 */
  border-radius: 8px;
  /* 盒子阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 确保内容垂直居中 */
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.card:hover {
  cursor: pointer;
  background-color: #f5f5f5;
}
.circle-active{
  background-color: #999999;
}
</style>
